<template>
  <div></div>

  <!-- 模板预览-弹窗 -->
  <el-dialog v-model="tViewModel.dialogVisible" :title="tViewModel.info.name" width="880">

    <div class="intro-container">
      <div class="intro-container-down">
        <div class="preview-wrapper">
          <div class="img-preview">
            <EditorPlus 
              ref="editorRef"
              :llm_url="llm_url"
              :llm_key="llm_key"
              :llm_model="llm_model"
              :export_api="export_api"
              :import_api="import_api"
              :showTools="false"
            />
          </div>
        </div>
      </div>
    </div>

  </el-dialog>



</template>

<script setup lang="ts">
import { ref, reactive, defineEmits } from 'vue';
const emit = defineEmits(['tempUse']);

import { EditorPlus } from '@/components/editor/index.ts'
const llm_url = import.meta.env.VITE_LLM_URL as string;
const llm_key = import.meta.env.VITE_LLM_KEY as string;
const llm_model = import.meta.env.VITE_LLM_MODEL as string;
const export_api = '/iapi/export'
const import_api = '/iapi/import'
const editorRef = ref<any>(null)

import { templateApi } from '@/api/template';
import { marked } from 'marked';

const docsEntity = ref<any>({})
const getDetail = async (id: number | string) => {
	try {
		const res = await templateApi.getTempDetail(id);
		if (res) {
			docsEntity.value = res;
			editorRef.value.setEditorContent(marked.parse(docsEntity.value.content || ''));
		} else {
			editorRef.value.setEditorContent('');
			console.error('获取详情失败:');
		}
	} catch (error) {
		console.error('请求错误:', error);
	};
}

const tViewModel = reactive({
  dialogVisible: false,
  info: {}
})

const open = (item: any) => {
  tViewModel.dialogVisible = true
  tViewModel.info = {...item}

  // 设置aiEditor为只读模式
  setTimeout(() => {
    let aiEditor = editorRef.value.getAiEditor();
    aiEditor.setEditable(false)
  
    if (item.id) {
      getDetail(item.id)
    } else {
      editorRef.value.setEditorContent('');
    }


    // getEditPng();
  }, 100)
}

defineExpose({
  open
})

// import html2canvas from 'html2canvas';

// const getEditPng = () => {
//   html2canvas(document.querySelector('.aie-container-panel-box')).then(canvas => {
//     // document.body.appendChild(canvas);
//     const imgData = canvas.toDataURL("image/png");
//     // 可用于下载、上传、预览等
//     console.log(imgData, '...')
//   });
// }

</script>

<style lang="less" scoped>
.intro-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  
  .intro-container-down {
    display: flex;
    flex-direction: row;

    &::-webkit-scrollbar{
      width:5px;
    }

    .preview-wrapper {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 8px;
      min-width: 384px;
      // padding: 32px;
      position: relative;
      width: 100%;

      .img-preview {
        background-color: #fff;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        min-height: calc(550px - 64px);
      }
    }
  }
}


.img-preview {
  height: 550px;
  :is(.app) {
    height: 100%;
  }

  :deep(#aiEditor){
    height: 100%;

    :is(.aie-header-panel, .aie-container-footer, .aie-menu-button) {
      display: none;
    }

    .aie-main{
      height: 100%;
      overflow: hidden auto;
      &::-webkit-scrollbar{
        width:5px;
      }
    }
  }
}
</style>